<template>
  <section>
    <div class="section-header">
      <div class="section-des">
        <h1>纵向项目审批流程</h1>
        <small>置纵向项目的登记审批流程</small>
      </div>
      <div class="pull-right">
        <el-button class="process-op" type="text" size="small" @click="historyProcessLog=true">历史流程</el-button>
        <el-button class="process-op" type="primary" size="small" @click="editProcess">编辑流程</el-button>
      </div>
    </div>
    <div class="section-content">
      <p>审批流程</p>
      <span class="process-content"><i class="el-icon-location"></i>申请人</span>
      <span class="process-line"></span>
      <span class="process-content">信息处</span>
    </div>
    <!-- 编辑流程dialog -->
    <el-dialog title="纵向项目审批流程" :visible.sync="editProcessDialog" class="process-dialog" width="30%">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        class="sortableTable">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="zip" label="邮编"></el-table-column>
        <el-table-column
          width="140"
          :class-name="'row-op'">
          <template slot-scope="scope">
            <el-button class="move" type="text" size="small" @click="handleMove(scope.$index, -1)">上移</el-button>
            <el-button class="move" type="text" size="small" @click="handleMove(scope.$index, +1)">下移</el-button>
            <el-button type="text" size="small" class="delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-op">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            +添加审批角色
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled>一级单位名称</el-dropdown-item>
            <el-dropdown-item>人事部</el-dropdown-item>
            <el-dropdown-item disabled>一级单位名称</el-dropdown-item>
            <el-dropdown-item divided>一级单位名称</el-dropdown-item>
            <el-dropdown-item >一级单位名称</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editProcessDialog = false">取 消</el-button>
        <el-button type="primary" @click="publishHandle">发 布</el-button>
      </div>
    </el-dialog>
    <!-- 历史流程dialog -->
    <el-dialog title="历史流程" :visible.sync="historyProcessLog" class="process-dialog" width="30%">
      <el-table
        :data="tableData">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="zip" label="邮编"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="historyProcessLog = false">知道了</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 2,
        date: '2016-05-02',
        name: '==小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      radio: '1',
      editProcessDialog: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      form: {
        name: '',
        percent: '',
        desc: '',
      },
      formLabelWidth: 120,
      uploadBtnVisible: true,
      sortable: null,
      historyProcessLog: false, // 历史流程弹窗
    }
  },
  methods: {
    editProcess() {
      this.editProcessDialog = true;
      const self = this;
      this.$nextTick(() => {
        const table = document.querySelector('.sortableTable tbody');
        self.sortable = Sortable.create(table, {
          draggable: '.item',
          onEnd({ newIndex, oldIndex }) {
            const targetRow = self.tableData.splice(oldIndex, 1)[0]
            self.tableData.splice(newIndex, 0, targetRow)
          }
        })
      });
    },
    onProgress() {
      this.uploadBtnVisible = false;
    },
    onError() {
      this.uploadBtnVisible = true;
    },
    handleMove(index, type) {
      const targetIndex = index + type;
      if (targetIndex < 0 || targetIndex > this.tableData.length) {
        this.$message('不能移动了哦');
      } else {
        const targetRow = this.tableData.splice(index, 1)[0];
        this.tableData.splice(index + type, 0, targetRow);
        this.sortable.sort(this.tableData);
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'cant-move';
      } else {
        return 'item';
      }
    },
    // 确认发布
    publishHandle() {
      this.$confirm('流程发布后新提交的申请将采用新流程，正在进行中的申请仍将沿用旧流程。', '确认启用新的纵向项目审批流程？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '发布成功!'
        });
      }).catch(() => {
      });
    }
  },
}
</script>
<style lang="scss" scoped>
// section
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-des {
  display: inline-block;
}
// 审批流程
.process-content {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 16px;
  text-align: center;
  background-color: #F0F2F5;
  border: 1px solid #E1E7EE;
  i {
    color: var(--main-color);
  }
}
.process-line {
  display: inline-block;
  border-bottom: 2px solid #DCDFE6;
  width: 76px;
  position: relative;
  top: -4px;
  &::after {
    box-sizing: border-box;
    position: absolute;
    right: -7px;
    top: -3px;
    content: '';
    border: 4px solid transparent;
    border-left: 16px solid #DCDFE6;
  }
}
.delete {
  color: #F04134;
}
.el-table /deep/ .cant-move td {
  color: #909399;
}
.el-table .cant-move .move {
  visibility: hidden;
}
// dialog
.add-op {
  border-bottom: 1px solid #ebeef5;
  height: 57px;
  line-height: 57px;
  padding-left: 10px;
  .el-dropdown-link {
    color: var(--btn-link-color);
  }
}
</style>
